<template>
    <div class="wrap" v-if="value">
        <div class="content">
            <img class="close" @click="close" src="~@/assets/imgs/icon/close.png" alt="">
            <div class="title">
                Congratulations
            </div>
            <div class="text">
                You have received 50 pesos<br /> click to withdraw!
            </div>
            <button class="confirm" @click="returnTo">Get it now</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'GetRewards',
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    methods:{
        close () {
            this.$emit('input', false)
        },
        returnTo(){
            this.$hybrid.action('ee', {
                content: 'home_activity_popup_click'
            })
            this.$emit('checkStep')
            this.close()
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13;
    background: rgba(0, 0, 0, 0.50);
    .content{
        width: 650px;
        height: 660px;
        background: url("~@/assets/imgs/market/DanRewards.png");
        background-size: 100% 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        padding: 284px 48px 44px;
    }
    .close {
        width: 48px;
        position: absolute;
        top: 172px;
        right: 28px;
    }
    .title {
        color: #222;
        font-size: 48px;
        font-weight: bold;
    }
    .text{
        margin-top: 32px;
        line-height: 48px;
        font-size: 32px;
        color: #666;
    }
    .confirm{
        display: block;
        width: 100%;
        height: 100px;
        border-radius: 50px;
        background-color: #EC5958;
        color: #FFF;
        font-size: 40px;
        margin-top: 48px;
    }
}
</style>